export default {
  name: 'play-track',
  components: {},
  props: {
    trackList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showDialog: true, // 是否显示弹窗
      map: null // 地图组件
    }
  },
  computed: {
    showDialogFlag: {
      get() {
        return this.showDialog
      },
      set(val) {
        this.$emit('update:showDialog', val)
      }
    }
  },
  mounted() {
    this.initMap();
    // this.initMap();
  },
  methods: {
    // 关闭dialog时需要告诉父组件隐藏弹窗
    closeDialog() {
      this.showDialog = false;
      this.$emit('close', true);
    },

    // 初始化地图
    initMap() {
      let trackList = [];
      let that = this;
      for (let index = 0; index < this.trackList.length; index++) {
        const element = [Number(this.trackList[index].lng), Number(this.trackList[index].lat)];
        trackList.push(element)
      }
      setTimeout(() => {
        this.map = new AMap.Map('map-container', {
          resizeEnable: true // 是否监控地图容器尺寸变化
        });

        let marker = new AMap.Marker({
          map: this.map,
          icon: new AMap.Icon({
            size: new AMap.Size(64, 64),
            imageSize: new AMap.Size(64, 64),
            image: require("@/assets/imgs/car-img-play.png") // 添加 Icon 图标 URL
          }),
          // icon: "https://webapi.amap.com/images/car.png",
          autoRotation: true
          // angle: -90
        });

        new AMap.Polyline({
          map: this.map,
          path: trackList,
          showDir: true,
          strokeColor: "#28F", // 线颜色
          strokeWeight: 6 // 线宽
        });

        let passedPolyline = new AMap.Polyline({
          map: this.map,
          path: trackList,
          strokeColor: "#AF5", // 线颜色
          strokeWeight: 6 // 线宽
        });

        let flag = true;
        marker.on('moving', function(e) {
          passedPolyline.setPath(e.passedPath);
          // that.map.setFitView();
          if (flag) {
            setTimeout(() => {
              that.map.setFitView();
            }, 200);
          }
          flag = false;
        });
        marker.moveAlong(trackList, 2000);

        that.map.setFitView();
      }, 200);
    }
  }
}
